<template>
	<!-- <scroll-view scroll-y="true" @scroll="scrollEvent"></scroll-view> -->
	<scroll-view
		id="listview" style="flex: 1;background: #fff;" 
		:refresher-enabled="false" 
		:refresher-default-style="refresherStyle"
		:refresher-triggered="refresherTriggered" 
		@scroll="scrollEvent"
		@scrolltolower="onScrollTolower"
		@touchstart="outsideTouchEvent"
	>
		<!-- 朋友圈背景图 --> 
<!-- 		<list-item class="top"> 
			<image class="bg-image" src="/static/1.png" mode="aspectFill"></image>
			<view class="user-info uni-row" ref="user-info">
				<text class="username">微信朋友圈</text>
				<image class="user-avatar" src="https://img0.baidu.com/it/u=1415523915,841919565&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1713286800&t=a9e21a0e5650a672fa2cbd3b133ed7e0" mode="widthFix"></image>
			</view>
		</list-item> -->
	   
		<!-- 视频朋友圈内容 -->
		<!-- <list-item class="item uni-row">
			<image class="avatar" src="/static/1.png" mode="scaleToFill"></image>
			<view class="content uni-row uni-column">
				<text class="name">UNIAPP X</text>
				<text class="text">{{ text }}</text> -->
				<!-- 图片 / 视频 -->
				<!-- <view class="video">
					<video :controls="false" class="video" poster="/static/1.png" src="https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4"></video>
				</view> -->
				<!-- 时间/点赞/评论按钮 -->
				<!-- <comment-line :scrollTop="scrollTop"></comment-line> -->
				<!-- 点赞/评论信息列表 -->
		<!-- 	 	<comment :commentList="dataInfo.commentList"></comment> 
			</view> 
		 </list-item> -->
	  
		<!-- 图文朋友圈内容-->
		<view class="item uni-row" v-for="item in posts_list" :key="item.id" v-if="posts_list.length > 0">
			<!-- <image class="avatar" src="/static/1.png" mode="scaleToFill"></image> -->
			<image class="avatar" :src="item.user && item.user.avatar ? getImgUrl(item.user.avatar) : ''" mode="aspectFill" v-if="item.user && item.user.avatar && item.user.avatar != 'def-avatar.png'"></image>
			<image src="/static/def-avatar.png" class="avatar" mode="scaleToFill" v-else></image>
			<view class="content uni-row uni-column">
				<text class="name">{{ item.user.nick_name }}</text>
				<text class="text">{{ item.content }}</text>
				<!-- 图片 / 视频 -->
				<view class="images uni-row">
					<uni-moments-image :imageList="item.resources ? JSON.parse(item.resources) : []"></uni-moments-image>
				</view>
				<!-- 定位 -->
				<text class="address mt-5">{{ getJsonToObj(item.location) }}</text>
				<!-- 时间/点赞/评论按钮 -->
				<comment-line :scrollTop="scrollTop" :id="item.id" :userId="item.user_id"  :createdAt="item.created_at"></comment-line>
				<!-- 点赞/评论信息列表 -->
				<comment :id="item.id" :isRefresh="isRefresh" :scrollTop="scrollTop"></comment>
			</view>
		</view>
		<view class="item uni-row" v-else>
			<view style="text-align: center;margin:auto">
				<image class="find-image" src="/static/empty.png" mode="widthFix" style="width: 200rpx;height:200rpx;"></image>
				<view style="color: #999;font-size: 26rpx">暂无数据</view>
			</view>
		</view>
	</scroll-view>
	
	
	<!-- 自定义导航栏 -->
	<moments-header ref="header" :scrollTop="scrollTop"></moments-header>
	
	<!-- 点赞/评论 -->
	<comment-popup ref="commentPopup2"></comment-popup>
	
	<!-- 点赞/评论 -->
	<comment-delete ref="commentDelete2"></comment-delete>
	
	<!-- 评论输入框 -->
	<comment-input ref="commentInput2"></comment-input>
</template> 

<script>
	import MomentsHeader from './components/momentsHeader.vue';
	import CommentPopup from './components/comment-popup.vue';
	import CommentDelete from './components/comment-delete.vue';
	import CommentLine from './components/comment-line.vue';
	import CommentInput from './components/comment-input.vue';
	import Comment from './components/comment.vue';
	import uniMomentsImage from '../../components/uni-moments-image/uni-moments-image.vue';
	import * as FindApi from '@/api/find'
    import { ImgUrlPrefix } from '@/utils/util.js'
	export default {
		components: { CommentLine, Comment, MomentsHeader, CommentInput, CommentPopup, uniMomentsImage, CommentDelete },
		data() {
			return {
				item_count: 20,
				listViewElement: null,
				refresherTriggered: false,
				refresherStyle: "none",
				text: `uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。uts是一门类ts的、跨平台的、新语言。uts在iOS端编译为swift、在Android端编译为kotlin、在Web端编译为js。`,
				imageList: [
					// "https://img1.baidu.com/it/u=1965663592,580944689&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1713286800&t=5c73d7f8aaa2a6f5114e659dd64e769d",
				],
				posts_list: [],
				scrollTop: 0,
				keyboardHeight: 200, // ios 默认键盘高度，这里占位
				commentText: '', //评论回复内容
				dataInfo: {
					commentList: [{toName:'',fromName:'查理斯', content:'这是什么地方？真好看啊'}] //评论列表
				},
				isRefresh: 0
			}
		},
		onReady() {
			// this.listViewElement = uni.getElementById('listview');
			this.listViewElement = uni.createSelectorQuery().in(this).select('#listview');
			// 监听点击评论事件
			uni.$on('commentScrollEvent2', (y) => {this.listViewScrollByY(y.top - this.keyboardHeight + 40);this.isRefresh=0});
			// 监听一次键盘高度回调
			uni.$once('keyboardHeightEvent2', (keyboardHeight) => {
				this.keyboardHeight = keyboardHeight;
			});
			// 监听评论回复回调
			uni.$on('commentSubmitEvent2', (val) => {
				console.log('find评论回复内容',val)
				this.isRefresh = val.posts_id
			});
			
			uni.$on('RefreshList', (val) => {
				this.getList()
			})
		},
		onLoad() {
			this.getList()
			this.outsideTouchEvent()
		},
		methods: {
			//帖子列表
			getList: function() {
				const app = this
				FindApi.postsList({
					"page":1,
					"user_id": 0, // 默认 0，查看别人主页就是 用户id
				}).then(result => {
					console.log(result,'result')
					app.posts_list = result.data.items
				  })
			},
			// 转换json数据
			getJsonToObj: function(val) {
				if(val) {
					let data = JSON.parse(val)
					if(data !== '{}') {
						return data.name
					} else {
						return ''
					}
				}else {
					return ''
				}
			},
			// 目标元素以外的touch事件
			outsideTouchEvent() { 
				console.log('outsideTouchEvent')
				// https://doc.dcloud.net.cn/uni-app-x/component/#methods
				if(this.$refs['commentPopup2']) {
					this.$refs['commentPopup2'].hideCommentPopup(); // 隐藏点赞/评论
				}
				if(this.$refs['commentDelete2']) {
					this.$refs['commentDelete2'].hideCommentPopup(); // 隐藏删除
				}
				if(this.$refs['commentInput2']) {
					this.$refs['commentInput2'].hideKeyboard(); // 隐藏评论框与键盘
				}
			},

			onScrollTolower() {
				console.log('onScrollTolower')
				setTimeout(() => {
					this.item_count += 20
				}, 300)
			},
			
			scrollEvent(e) {
				console.log('scrollEvent',e)
				this.scrollTop = e.detail.scrollTop;
			},

			listViewScrollByY(y) {
				// this.listViewElement?.scrollBy(0, y)
				console.log('this.keyboardHeight',this.keyboardHeight, y)
				this.listViewElement.boundingClientRect((rect) => {
				  if (rect) {
				    uni.pageScrollTo({
				      scrollTop: y, // 滚动到目标元素的顶部
				      duration: 300, // 滚动动画的时长
				    });
				  }
				}).exec();
			},
			
			// 图片地址拼接
			getImgUrl(val) {
			    const url = ImgUrlPrefix(val)
			    return url
			},
		},
		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			console.log('下拉刷新')
		   // 获取数据
		  this.getList()
		  uni.stopPullDownRefresh()
		},
		// 页面滚动时会被触发 ，获取滚动的高度
		onPageScroll(e) {
			// console.log('scrollEvent222',e)
		  // 在这里编写滚动相关的逻辑
		  this.scrollTop = e.scrollTop;
		},
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>